<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧医疗系统 - 患者端</title>
    <style>
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background: #f8f9fa;
            border-bottom: 1px solid #ddd;
            height: 60px;
        }

        .user-info {
            text-align: right;
            color: #333;
        }

        .user-info span {
            margin-left: 10px;
            font-weight: bold;
        }

        .container {
            width: 100%;
            height: calc(100vh - 60px);
            display: flex;
        }

        .sidebar {
            width: 200px;
            background: #333;
            padding: 20px;
            color: white;
            margin-top: 0;
        }

        .sidebar h2 {
            color: white;
            margin-bottom: 20px;
        }

        .menu-item {
            padding: 10px;
            cursor: pointer;
            margin-bottom: 5px;
            color: white;
        }

        .menu-item:hover {
            background: #444;
        }

        .main-content {
            flex: 1;
            padding: 20px;
        }

        .content-section {
            display: none;
        }

        .content-section.active {
            display: block;
        }

        .calendar {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }

        .calendar-day {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: center;
            cursor: pointer;
        }

        .calendar-day:hover {
            background: #f0f0f0;
        }

        .calendar-day.selected {
            background: #4CAF50;
            color: white;
        }

        .department-list {
            width: 200px;
            float: left;
            margin-right: 20px;
            background: #f5f5f5;
            padding: 10px;
            border-radius: 4px;
        }

        .department-list .menu-item {
            background: #e8e8e8;
            color: #333;
        }

        .department-list .menu-item:hover {
            background: #444;
            color: white;
        }

        .doctor-info {
            margin-left: 220px;
        }

        .doctor-card {
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 4px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f5f5f5;
        }

        .btn {
            padding: 8px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }

        .action-buttons {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="logo">
            <img src="/front_code/assets/out.gif" alt="网站Logo">
        </div>
        <div class="user-info">
            患者：<span id="patientName">张三</span>
            <br>
            编号：<span id="patientId">P123456</span>
            <br>
            <button class="btn btn-secondary" onclick="logout()">退出登录</button>
        </div>
    </div>
    <div class="container">
        <div class="sidebar">
            <h2>智慧医疗系统</h2>
            <div class="menu-item" onclick="showSection('appointment')">预约挂号</div>
            <div class="menu-item" onclick="showSection('reports')">检查报告</div>
            <div class="menu-item" onclick="showSection('orders')">挂号订单</div>
        </div>

        <div class="main-content">
            <div id="appointment" class="content-section">
                <h2>预约挂号</h2>
                <div class="calendar">
                    <div class="calendar-day" onclick="selectDate(this, '2023-10-23')">周一<br>10-23</div>
                    <div class="calendar-day" onclick="selectDate(this, '2023-10-24')">周二<br>10-24</div>
                    <div class="calendar-day" onclick="selectDate(this, '2023-10-25')">周三<br>10-25</div>
                    <div class="calendar-day" onclick="selectDate(this, '2023-10-26')">周四<br>10-26</div>
                    <div class="calendar-day" onclick="selectDate(this, '2023-10-27')">周五<br>10-27</div>
                    <div class="calendar-day" onclick="selectDate(this, '2023-10-28')">周六<br>10-28</div>
                    <div class="calendar-day" onclick="selectDate(this, '2023-10-29')">周日<br>10-29</div>
                </div>

                <div class="department-list">
                    <h3>选择科室</h3>
                    <div class="menu-item" onclick="selectDepartment('内科')">内科</div>
                    <div class="menu-item" onclick="selectDepartment('外科')">外科</div>
                    <div class="menu-item" onclick="selectDepartment('儿科')">儿科</div>
                    <div class="menu-item" onclick="selectDepartment('妇科')">妇科</div>
                    <div class="menu-item" onclick="selectDepartment('骨科')">骨科</div>
                </div>

                <div class="doctor-info" id="doctorList">
                    <div class="doctor-card">
                        <h3>李医生</h3>
                        <p>专业：内科</p>
                        <p>坐诊时间：周一至周五 8:00-17:00</p>
                        <p>简介：从事内科临床工作20年，擅长治疗各类内科疾病...</p>
                        <button class="btn">预约</button>
                    </div>
                    <div class="doctor-card">
                        <h3>王医生</h3>
                        <p>专业：内科</p>
                        <p>坐诊时间：周二、周四、周六 9:00-18:00</p>
                        <p>简介：内科主任医师，擅长心血管疾病诊治...</p>
                        <button class="btn">预约</button>
                    </div>
                    <div class="doctor-card">
                        <h3>张医生</h3>
                        <p>专业：外科</p>
                        <p>坐诊时间：周一、周三、周五 8:30-17:30</p>
                        <p>简介：外科副主任医师，专注微创手术...</p>
                        <button class="btn">预约</button>
                    </div>
                </div>
            </div>

            <div id="reports" class="content-section">
                <h2>检查报告</h2>
                <table>
                    <thead>
                        <tr>
                            <th>报告ID</th>
                            <th>数据名称</th>
                            <th>数据值</th>
                            <th>设备ID</th>
                            <th>上传时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>R001</td>
                            <td>血常规</td>
                            <td>正常</td>
                            <td>D123</td>
                            <td>2023-10-20</td>
                            <td>
                                <button class="btn">下载</button>
                                <button class="btn">打印</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div id="orders" class="content-section">
                <h2>挂号订单</h2>
                <table>
                    <thead>
                        <tr>
                            <th>门诊号</th>
                            <th>就诊日期</th>
                            <th>就诊科室</th>
                            <th>就诊医生</th>
                            <th>报告ID</th>
                            <th>医生备注</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>M001</td>
                            <td>2023-10-21</td>
                            <td>内科</td>
                            <td>李医生</td>
                            <td>R001</td>
                            <td>建议复查</td>
                            <td>
                                <button class="btn">下载</button>
                                <button class="btn">打印</button>
                            </td>
                        </tr>
                        <tr>
                            <td>M002</td>
                            <td>2023-10-22</td>
                            <td>外科</td>
                            <td>张医生</td>
                            <td>R002</td>
                            <td>恢复良好</td>
                            <td>
                                <button class="btn">下载</button>
                                <button class="btn">打印</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script src="/front_code/js/vue.js" type="text/javascript"></script>
    <script src="/front_code/js/jquery-3.6.0.min.js"></script>
    <script src="/front_code/js/患者端.js"></script>
    <script type="text/javascript">
        function logout() {
            window.location.href = '登录界面.html';
        }
    </script>
</body>

</html>